Implement Pagination using CSS3
Implementing pages on the web using CSS3 means creating clickable links that allow users to navigate to pages within. Here's a step-by-step guide to creating simple, beautiful page layouts using HTML and CSS3,
Explanation
HTML
Here is created an HTML structure for pagination links,
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">»</a>
</div>CSS3
Now, a CSS structure is created for pagination styling
body {
font-family: Arial, sans-serif;
}
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
margin: 0 4px;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}In the above code-
HTML
- The
div.paginationelement binds to page links. - Each element represents a paging link.
«and»are HTML entities for "left quote" and "right quote", which are commonly used for the previous and next buttons, respectively.
CSS
body- Sets the font embedded in the body.
.pagination- Ensures that the page cache is inline-block so that its full width is not blocked.
.pagination a- Styles any pagination link without padding, without text decoration, colors, float properties, borders, and margins between links. It also adds transition effects for smooth background color changes.
.pagination a.active- Sets the active/current page link to highlight it with a different background color and border.
.pagination a:hover- (.active): Changes the background color of links on hover, except for active links.
JavaScript
document.addEventListener("DOMContentLoaded", function() { ... }) Checks if the script runs after all the DOM has loaded.
const content = document.getElementById("content");
Selects the content div.
const pageNumbers = document.querySelectorAll(".page-num"); Selects all pagination number links.
const prev = document.getElementById("prev"); and const next = document.getElementById("next"); Selects the previous and next buttons.
let currentPage = 2; Set the starting page number (corresponding to the active link).
function updateContent(page) { ... } Updates the content and active classes based on the current page number.
Each page number link, previous button, and next button add click event listeners to handle page creation logic.
Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination Example</title>
<style>
/* styles.css */
body {
font-family: Arial, sans-serif;
}
#content {
margin-bottom: 20px;
}
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
margin: 0 4px;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="content">
<p>Page 1 content goes here.</p>
</div>
<div class="pagination">
<a href="#" id="prev">«</a>
<a href="#" class="page-num">1</a>
<a href="#" class="page-num active">2</a>
<a href="#" class="page-num">3</a>
<a href="#" class="page-num">4</a>
<a href="#" class="page-num">5</a>
<a href="#" id="next">»</a>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const content = document.getElementById("content");
const pageNumbers = document.querySelectorAll(".page-num");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
let currentPage = 2;
function updateContent(page) {
content.innerHTML = `<p>Page ${page} content goes here.</p>`;
pageNumbers.forEach(pageNum => pageNum.classList.remove("active"));
document.querySelector(`.page-num:nth-child(${page + 1})`).classList.add("active");
}
pageNumbers.forEach(pageNum => {
pageNum.addEventListener("click", function(e) {
e.preventDefault();
currentPage = parseInt(this.textContent);
updateContent(currentPage);
});
});
prev.addEventListener("click", function(e) {
e.preventDefault();
if (currentPage > 1) {
currentPage--;
updateContent(currentPage);
}
});
next.addEventListener("click", function(e) {
e.preventDefault();
if (currentPage < pageNumbers.length) {
currentPage++;
updateContent(currentPage);
}
});
});
</script>
</body>
</html>Output-
Result
The result of this code is a clean and responsive page layout screen with links that change automatically as you hover over them, and a separately active link that displays the current page.
Costomization
By changing the colours, padding, borders and hover effects in CSS you can further customize the pagination style to match the layout of your website.
Aslo, Read: Explain the CSS Custom Properties
Leave Comment